<script lang="ts" setup>
import {
  updateUserInfo,
  UpdateUserParams,
  UserInfoDetailVO
} from "@/api/modules/system";
import { getRandomAvatar } from "@/api/modules/system/common";
import { message } from "@/utils/message";
import { cloneDeep } from "@pureadmin/utils";
import type { PlusColumn } from "plus-pro-components";
import { PlusDrawerForm } from "plus-pro-components";
import "plus-pro-components/es/components/drawer-form/style/css";
import { ref, watch } from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  row: {
    type: Object as PropType<UserInfoDetailVO>,
    default: () => {}
  }
});

const emit = defineEmits(["update:visible", "refresh"]);

const rules = {
  name: [
    {
      required: true,
      message: "请输入名称"
    }
  ],
  tag: [
    {
      required: true,
      message: "请输入标签"
    }
  ]
};

const state = ref<UpdateUserParams>({
  id: null,
  nickname: null,
  email: null,
  phone: null,
  status: null,
  avatar: null
});
const initState = cloneDeep(state.value);

const columns: PlusColumn[] = [
  {
    label: "用户名",
    width: 120,
    prop: "username"
  },
  {
    label: "昵称",
    width: 120,
    prop: "nickname"
  },
  {
    label: "邮箱",
    width: 120,
    prop: "email"
  },
  {
    label: "手机号",
    width: 120,
    prop: "phone"
  },
  {
    label: "头像",
    width: 120,
    prop: "avatar",
    tooltip: "头像地址"
  },
  {
    label: "状态",
    width: 120,
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "启用",
        value: 1
      },
      {
        label: "禁用",
        value: 0
      }
    ]
  }
];

const visible = ref(props.visible);

// 监听props.visible变化，同步到本地状态
watch(
  () => props.visible,
  newVal => {
    visible.value = newVal;
    // 当抽屉打开时，初始化表单数据
    if (newVal && props.row) {
      state.value.id = props.row.id;
      state.value.nickname = props.row.nickname;
      state.value.email = props.row.email;
      state.value.phone = props.row.phone;
      state.value.status = props.row.status;
      state.value.avatar = props.row.avatar;
    }
  }
);

const handleCancel = () => {
  visible.value = false;
  state.value = initState;
  emit("update:visible", false);
};

const handleConfirm = () => {
  updateUserInfo(state.value).then(res => {
    if (res.success) {
      message("信息修改成功", { type: "success" });
      handleCancel();
      emit("refresh");
    }
  });
};
</script>

<template>
  <PlusDrawerForm
    v-model:visible="visible"
    v-model="state"
    title="编辑用户"
    size="25%"
    :form="{ columns, rules }"
    @cancel="handleCancel"
    @confirm="handleConfirm"
  >
    <template #plus-field-username>
      <el-input :value="props.row.username" disabled />
    </template>
    <template #plus-field-avatar>
      <div class="w-full flex justify-between gap-2">
        <el-input v-model="state.avatar" placeholder="请输入头像地址" />
        <el-button
          type="primary"
          class="flex justify-end"
          @click="
            getRandomAvatar().then(res => {
              if (res.success) {
                state.avatar = res.data;
              }
            })
          "
        >
          随机头像
        </el-button>
      </div>
    </template>
  </PlusDrawerForm>
</template>
